<!DOCTYPE html>
<html>

<head>
    <title>Html displays Starbuz page</title>

    <style type="text/css">
        #header {
            background-color: gray;
            height: 150px;
        }

        #header>p {
            background-color: hotpink;
            text-align: center;
            position: relative;
            top: 50%;
        }

        #tableContainer {
            display: table;
            width: 100%;
        }

        #tableRow {
            display: table-row
        }

        #drinks {
            background-color: green;
            height: 400px;
            width: 20%;
            display: table-cell;
        }

        #main {
            background-color: blueviolet;
            height: 400px;
            width: 50%;
            display: table-cell;
        }

        #sidebar {
            background-color: yellow;
            height: 400px;
            width: 30%;
            display: table-cell;
        }

        #footer {
            background-color: coral;
            height: 50px;
        }
    </style>
</head>

<div id="header">
    <p>Header</p>
</div>

<div id="tableContainer">
    <div id="tableRow">
        <div id="drinks">
            <p>Drinks</p>   
        </div>

        <div id="main">
            <p>main</p>
            <p>2021/5/3</p>
        </div>

        <div id="sidebar">
            <p>SideBar</p>
        </div>

    </div>
</div>

<div id="footer">
    <p>Footer</p>
</div>

</html>